<template>
    <div v-loading="loading" class="console-page">
        <el-form inline :model="searchForm" class="e-page form-item" spellcheck="false" @submit.native.prevent>
            <el-row class="toolbar">
                <el-col :span="6" style="padding-right: 5px">
                    <el-input v-model="searchForm.url" placeholder="网站地址" clearable class="input-auto-resize" />
                </el-col>
                <el-col :span="3" style="padding-right: 5px">
                    <el-button type="primary" @click="searchTable" circle class="button-auto-resize"
                        :loading="bt_loading" native-type="submit" :icon="getIcon('search')">
                    </el-button>
                </el-col>
                <el-col :span="15" style="text-align: right">
                    <el-button :icon="getIcon('link')" circle class="button-auto-resize" @click="cache" />
                    <el-button :icon="getIcon('plus')" circle class="button-auto-resize" @click="addNew" />
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" border header-cell-class-name="el-table-header-cell" cell-class-name="el-table-cell"
            class="e-page table-with-pagination">
            <el-table-column prop="name" label="名称" :width="fontAutoResize.size_12.value" />
            <el-table-column prop="url" label="网站地址" :width="fontAutoResize.size_20.value">
                <template #default="scope">
                    <el-link :href="scope.row.url" :target="scope.row.name">{{ scope.row.url }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="image" label="封面地址" min-width="100" />
            <el-table-column prop="description" label="网站描述" min-width="120" />
            <el-table-column prop="crtTime" label="创建时间" :width="fontAutoResize.size_11.value" />
            <el-table-column prop="updateTime" label="更新时间" :width="fontAutoResize.size_11.value" />
            <el-table-column fixed="right" label="操作" :width="operationWidth" className="operation-column">
                <template #default="scope">
                    <el-button type="primary" :icon="getIcon('editPen')" circle class="button-auto-resize"
                        @click="edit(scope.row)" />
                    <el-button type="danger" :icon="getIcon('delete')" circle class="button-auto-resize"
                        @click="del(scope.row)" confirmTitle="是否确认删除该接口?" />
                </template>
            </el-table-column>
        </el-table>
        <div style="height: 50px;">
            <el-pagination background @size-change="SizeChange" @current-change="CurrentChange"
                :current-page="currentPage" :page-sizes="page_sizes" :page-size="page_size"
                layout="total, sizes, prev, pager, next, jumper" prev-text="<上一页" next-text="下一页>" :total="total"
                class="e-page">
            </el-pagination>
        </div>
        <el-dialog title="网站信息" v-model="showDialog" @closed="close" class="dialog" width="50%" top="15vh"
            :show-close="false" @open="open" append-to-body>
            <el-form :model="webCollect" ref="webCollectRef" label-width="120px" class="e-page" spellcheck="false"
                @submit.native.prevent>
                <el-form-item label="网站名称" prop="name" :rules="[{ required: true, message: '请输入网站名称', trigger: [] },
                { min: 3, message: '网站名称至少3个字符', trigger: 'blur' }]">
                    <el-input v-model="webCollect.name" autocomplete="off" class="input-auto-resize"></el-input>
                </el-form-item>
                <el-form-item label="网站地址" prop="url" :rules="[{ required: true, message: '请输入网站地址', trigger: [] }]">
                    <el-input v-model="webCollect.url" autocomplete="off" class="input-auto-resize"></el-input>
                </el-form-item>
                <el-form-item label="封面地址" prop="image">
                    <el-input v-model="webCollect.image" autocomplete="off" class="input-auto-resize"></el-input>
                </el-form-item>
                <el-form-item label="网站描述" prop="description"
                    :rules="[{ required: true, message: '请输入网站描述', trigger: [] }]">
                    <el-input v-model="webCollect.description" autocomplete="off" class="input-auto-resize"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div>
                    <el-button @click="showDialog = false" :icon="getIcon('close')" circle class="button-auto-resize" />
                    <el-button type="primary" @click="submitForm" :icon="getIcon('check')" circle
                        class="button-auto-resize" :loading="bt_loading" />
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { useElMessage, useSetTableOperationWidth, useModalSize, useRequest } from "@usehook"
import { getIcon } from "@/utils/tools"
import { fontAutoResize } from "@/utils/setting"

const operationWidth = useSetTableOperationWidth(2)
let tableData = $ref([])
let currentPage = $ref(1)
let page_size = $ref(0)
let total = $ref(0)
let searchForm = $ref({ url: '' })
let loading = $ref(false)
let bt_loading = $ref(false)
let page_sizes = [10, 30, 50, 100, 200]
let showDialog = $ref(false)
let webCollect = $ref({ name: "", sequence: "", image: "", url: "", description: "", crtTime: "" })
const webCollectRef = $ref(null)

const cache = () => {
    useRequest({ url: "/webCollect/cache", method: "post" }).then(resp => {
        if (resp && resp.status) {
            useElMessage("成功生成" + resp.data + "个网站的缓存数据")
        }
    })
}
const del = (row) => {
    useRequest({ url: "/webCollect/delete", sequence: row.sequence, method: "post" }).then(resp => {
        if (resp && resp.status) {
            useElMessage("删除成功")
            getData()
        }
    })
}
const submitForm = () => {
    webCollectRef.validate((valid) => {
        if (valid) {
            save()
        } else {
            return false
        }
    })
}
const save = () => {
    bt_loading = true
    useRequest("/webCollect/save", { method: "post", ...webCollect }).then(resp => {
        if (resp && resp.status) {
            useElMessage("保存成功")
            getData()
            showDialog = false
        }
    }).finally(() => {
        bt_loading = false
    })
}
const edit = (row) => {
    webCollect = { name: row.name, sequence: row.sequence, image: row.image, url: row.url, description: row.description, crtTime: row.crtTime }
    showDialog = true
}
const addNew = () => {
    showDialog = true
}
const close = () => {
    useModalSize(false)
    webCollect = { name: "", sequence: "", image: "", url: "", description: "" }
    webCollectRef.clearValidate()
}
const open = () => {
    useModalSize()
}
const getWebCollectInfo = (params) => {
    loading = true
    bt_loading = true
    useRequest('/webCollect/getData', params).then(resp => {
        if (resp) {
            if (resp.status) { //0表示成功，1表示失败
                tableData = resp.data
                total = resp.totalRecord
            } else if (resp.message) useElMessage(resp.message)
        }
    }).finally(_ => {
        loading = false
        bt_loading = false
    })
}
const searchTable = () => {
    getWebCollectInfo({
        url: searchForm.url, limit: page_size, page: 1
    })
    currentPage = 1
}
const SizeChange = (val) => {
    getWebCollectInfo({
        url: searchForm.url, limit: val, page: currentPage
    })
    page_size = val
}
const CurrentChange = (val) => {
    getWebCollectInfo({
        url: searchForm.url, limit: page_size, page: val
    })
    currentPage = val
}
const getData = () => {
    getWebCollectInfo({
        url: searchForm.url, limit: page_size, page: currentPage
    })
}

onMounted(() => {
    page_size = page_sizes[1]
    getData()
})

</script>

<style scoped>
:deep(.el-form-item__error) {
    top: 10px;
    right: 5px;
    left: unset;
    z-index: 999;
    pointer-events: none;
}

:deep(.el-form-item) {
    margin-bottom: 10px;
}

:deep(.el-form-item:last-child) {
    margin-bottom: 0;
}

:deep(.el-form-item__content) {
    margin-right: 10px;
}
</style>

<style>
.dialog.el-dialog .el-dialog__body {
    padding: 2px 5px !important;
}
</style>